<!DOCTYPE html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>widget</title>
	<link rel="stylesheet" href="styles.css">
</head>
<h1>Widget iframe</h1>
<p><b>源</b>: http://chat.example.net:8080</p>
<p>通过门户设置状态为: <strong id="status"></strong> <p>

<div>
    <input type="text" id="messageText" value="Widget notification.">
    <button id="actionButton">发送通知</button>
</div>

<script>
	var targetOrigin = "http://portal.example.com:8080";
	window.addEventListener("load",loadDemo,true);
	window.addEventListener("message",messageHandler,true);

	function loadDemo(){
		document.getElementById("actionButton").addEventListener("click",
			function() {
				var messageText = document.getElementById("messageText").value;
				sendString(messageText);
			}, true);
	}

	function messageHandler(e) {
		if (e.origin === "http://portal.example.com:8080") {
			document.getElementById("status").textContent = e.data;
		} else {
			// ignore messages from other origins
		}
	}

	function sendString(s) {
		window.top.postMessage(s, targetOrigin);
	}
</script>


